<template>
	<div v-waterMarker class="merak-card" id="zy_20240320004"> 
		<el-calendar class="calendarContainer" ref="calendar" v-model="state.thisPageDate.calendarValue">
			<template #header="{date}">
				<div class="calendarCustomBox">
					<div class="topHeaderBox flx-align-center">
						<div class="userName">{{state.statUser.employee_name}}</div>
						<div class="jobMsg flx-align-center">
							<span>{{state.statUser.org_company_txt}}</span>
							<span>{{state.statUser.org_department_txt}}</span>
							<span>{{state.statUser.org_title_txt}}</span>
						</div>
					</div>
					<div class="monthDate flx-center">
						<div class="addLeftBtn" @click="selectDate('prev-month',date)">
							<el-icon size="18px"><ArrowLeft /></el-icon>
						</div>
						<div class="dateMsg">{{date}}</div>
						<div class="addRightBtn" @click="selectDate('next-month',date)">
							<el-icon size="18px"><ArrowRight /></el-icon>
						</div>
						<div class="checkingInNav flx-justify-between">
							<div class="checkingInItem" v-for="(item,index) in state.statData" :key="index">{{item.label}}：{{item.value}}{{item.unit}}</div>
						</div>
					</div>
				</div>
			</template>
			<template #date-cell="{data}">
				<div class="calendarDayBox" @click="handleCurrentView(data)">
					<div class="dayMsgNum">{{ data.day.split('-').slice(1).join('-').split('-')[1] }}</div>
					<div v-if="state.statList[getDayDetail(data)]?.status != -1">
						<div v-if="getMonthDetails(data) === state.thisPageDate.month">
							<div v-if="state.statList[getDayDetail(data)]?.out !== ''">
								<div class="workTime leave"><div class="after"></div>{{$t('clockingIn_daily.go_out')}}：{{state.statList[getDayDetail(data)]?.out}}</div>
							</div>
							<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 0 && state.statList[getDayDetail(data)]?.off_status == 0">
								<div class="workTime beOnDuty"><div class="after"></div>{{$t('clockingIn_daily.working')}}：{{state.statList[getDayDetail(data)].on}}</div>
								<div class="workTime offDuty"><div class="after"></div>{{$t('clockingIn_daily.off_duty')}}：{{state.statList[getDayDetail(data)].off}}</div>
							</div>
							<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 2 && state.statList[getDayDetail(data)]?.off_status == 2">
								<div class="workTime absenteeism"><div class="after"></div>{{$t('clockingIn_daily.absenteeism')}}</div>
							</div>
							<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 0 && state.statList[getDayDetail(data)]?.off_status == 2">
								<div class="workTime beOnDuty"><div class="after"></div>{{$t('clockingIn_daily.working')}}：{{state.statList[getDayDetail(data)].on}}</div>
								<div class="workTime absenteeism"><div class="after"></div>{{$t('clockingIn_daily.absenteeism')}}</div>
							</div>
							<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 2 && state.statList[getDayDetail(data)]?.off_status == 0">
								<div class="workTime absenteeism"><div class="after"></div>{{$t('clockingIn_daily.absenteeism')}}</div>
								<div class="workTime offDuty"><div class="after"></div>{{$t('clockingIn_daily.off_duty')}}：{{state.statList[getDayDetail(data)].off}}</div>
							</div>
							<el-popover v-else :show-arrow="false" :offset="-50" width="350" placement="right-start">
								<template #reference>
									<div v-if="state.statList[getDayDetail(data)]?.on_status === state.statList[getDayDetail(data)]?.off_status">
										<div v-if="state.statList[getDayDetail(data)]?.on_status === 1">
											<div v-if="state.statList[getDayDetail(data)]?.leave.length == 1">
												<div class="workTime leave headIcon" :style="{'color':state.statList[getDayDetail(data)]?.leave[0].color}"><div class="after" :style="{'background-color':state.statList[getDayDetail(data)]?.leave[0].color}"></div>{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.leave.length == 2">
												<div class="workTime leave headIcon" :style="{'color':state.statList[getDayDetail(data)]?.leave[0].color}"><div class="after" :style="{'background-color':state.statList[getDayDetail(data)]?.leave[0].color}"></div>{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
												<div class="workTime leave headIcon" :style="{'color':state.statList[getDayDetail(data)]?.leave[1].color}"><div class="after" :style="{'background-color':state.statList[getDayDetail(data)]?.leave[1].color}"></div>{{state.statList[getDayDetail(data)]?.leave[1]?.type}}</div>
											</div>
										</div>
									</div>
									<div v-else>
										<div>
											<div v-if="state.statList[getDayDetail(data)]?.on_status == 0">
												<div class="workTime beOnDuty"><div class="after"></div>{{$t('clockingIn_daily.working')}}：{{state.statList[getDayDetail(data)].on}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 1">
												<div class="workTime leave headIcon" :style="{'color':state.statList[getDayDetail(data)]?.leave[0]?.color}"><div class="after" :style="{'background-color':state.statList[getDayDetail(data)]?.leave[0]?.color}"></div>{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 2">
												<div class="workTime absenteeism"><div class="after"></div>{{$t('clockingIn_daily.absenteeism')}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 3">
												<div class="workTime beLate headIcon"><div class="after"></div>{{$t('clockingIn_daily.be_late')}}</div>
											</div>
										</div>
										<div>
											<div v-if="state.statList[getDayDetail(data)]?.off_status == 0">
												<div class="workTime beOnDuty"><div class="after"></div>{{$t('clockingIn_daily.off_duty')}}：{{state.statList[getDayDetail(data)].off}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.off_status == 1">
												<div class="workTime leave headIcon" :style="{'color':state.statList[getDayDetail(data)]?.leave[0]?.color}"><div class="after" :style="{'background-color':state.statList[getDayDetail(data)]?.leave[0]?.color}"></div>{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.off_status == 2">
												<div class="workTime absenteeism"><div class="after"></div>{{$t('clockingIn_daily.absenteeism')}}</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.off_status == 3">
												<div class="workTime leaveEarly headIcon"><div class="after"></div>{{$t('clockingIn_daily.leave_early')}}</div>
											</div>
										</div>
									</div>
								</template>
								<div class="calendar_card">
									<div v-if="state.statList[getDayDetail(data)]?.on_status == state.statList[getDayDetail(data)]?.off_status">
										<div v-if="state.statList[getDayDetail(data)]?.on_status == 1">
											<div v-if="state.statList[getDayDetail(data)]?.leave.length == 1">
												<div class="calendar_text title">{{state.statList[getDayDetail(data)].leave[0].title}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_type')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_time')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.begin}}~{{state.statList[getDayDetail(data)]?.leave[0]?.end}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_reason')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.reason}}</div>
												<div class="flx-align-center calendar_text">
													<div>{{$t('clockingIn_daily.approver')}}：</div>
													<div v-for="(item,index) in state.statList[getDayDetail(data)]?.leave[0]?.approver" :key="index">{{item?.employee_name}}</div>
												</div>
											</div>
											<div v-else="state.statList[getDayDetail(data)]?.leave.length == 2">
												<div class="calendar_text title">{{state.statList[getDayDetail(data)].leave[0].title}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_type')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_time')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.begin}}~{{state.statList[getDayDetail(data)]?.leave[0]?.end}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_reason')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.reason}}</div>
												<div class="flx-align-center calendar_text">
													<div>{{$t('clockingIn_daily.approver')}}：</div>
													<div v-for="(item,index) in state.statList[getDayDetail(data)]?.leave[0]?.approver" :key="index">{{item?.employee_name}}</div>
												</div>
												<div class="calendar_text title">{{state.statList[getDayDetail(data)].leave[1].title}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_type')}}：{{state.statList[getDayDetail(data)]?.leave[1]?.type}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_time')}}：{{state.statList[getDayDetail(data)]?.leave[1]?.begin}}~{{state.statList[getDayDetail(data)]?.leave[1]?.end}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_reason')}}：{{state.statList[getDayDetail(data)]?.leave[1]?.reason}}</div>
												<div class="flx-align-center calendar_text">
													<div>{{$t('clockingIn_daily.approver')}}：</div>
													<div v-for="(item,index) in state.statList[getDayDetail(data)]?.leave[1].approver" :key="index">{{item?.employee_name}}</div>
												</div>
											</div>
										</div>
									</div>
									<div v-else>
										<div>
											<div v-if="state.statList[getDayDetail(data)]?.on_status == 1">
												<div class="calendar_text title">{{state.statList[getDayDetail(data)]?.leave[0].title}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_type')}}：{{state.statList[getDayDetail(data)]?.leave[0].type}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_time')}}：{{state.statList[getDayDetail(data)]?.leave[0].begin}}~{{state.statList[getDayDetail(data)]?.leave[0].end}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_reason')}}：{{state.statList[getDayDetail(data)]?.leave[0].reason}}</div>
												<div class="flx-align-center calendar_text">
													<div>{{$t('clockingIn_daily.approver')}}：</div>
													<div v-for="(item,index) in state.statList[getDayDetail(data)]?.leave[0].approver" :key="index">{{item?.employee_name}}</div>
												</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.on_status == 3">
												<div class="calendar_text">{{$t('clockingIn_daily.clocking_time')}}：{{state.statList[getDayDetail(data)]?.on}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.be_late')}}：{{convertSecondsToHMS(state.statList[getDayDetail(data)]?.late_second)}}</div>
											</div>
										</div>
										<div>
											<div v-if="state.statList[getDayDetail(data)]?.off_status == 1">
												<div class="calendar_text title">{{state.statList[getDayDetail(data)].leave[0].title}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_type')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.type}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_time')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.begin}}~{{state.statList[getDayDetail(data)]?.leave[0]?.end}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_reason')}}：{{state.statList[getDayDetail(data)]?.leave[0]?.reason}}</div>
												<div class="flx-align-center calendar_text">
													<div>{{$t('clockingIn_daily.approver')}}：</div>
													<div v-for="(item,index) in state.statList[getDayDetail(data)]?.leave[0]?.approver" :key="index">{{item?.employee_name}}</div>
												</div>
											</div>
											<div v-else-if="state.statList[getDayDetail(data)]?.off_status == 3">
												<div class="calendar_text">{{$t('clockingIn_daily.clocking_time')}}：{{state.statList[getDayDetail(data)]?.off}}</div>
												<div class="calendar_text">{{$t('clockingIn_daily.leave_early')}}：{{convertSecondsToHMS(state.statList[getDayDetail(data)]?.before_quit_second)}}</div>
											</div>
										</div>
									</div>
								</div>
							</el-popover>
						</div>
					</div>
				</div>
			</template>
		</el-calendar>
	</div>
</template>

<script setup lang="ts" name="clockingInPerson">
	import { ref,reactive,onMounted,computed,getCurrentInstance,watch } from 'vue'
	import type { CalendarDateType, CalendarInstance } from 'element-plus'
	import { useRouter,useRoute } from 'vue-router';
	import {
		getCheckingInTabs,getCheckingInPersonTableDetail 
	} from "@/api/modules/personalManagementApi/checkingIn";
	
	const { proxy } = getCurrentInstance()!;

	const router = useRouter();
	const calendar = ref<CalendarInstance>()
	const getDayDetail = (data) => {
		let tDay = data.day.split('-').slice(1).join('-').split('-')[1];
		return "date_"+Number(tDay)
	}
	const getMonthDetails = (data) => {
		let tMonth = data.day.split('-').slice(1).join('-').split('-')[0]
		return Number(tMonth)
	}
	const selectDate = (val : CalendarDateType,date:any) => {
		state.statList = [];
		let today = state.thisPageDate.calendarValue;
		let year = today.getFullYear();
		let month = (today.getMonth() + 1).toString().padStart(2, '0');
		if(val == "prev-month"){
			if(Number(month) === 1){
				year = Number(year)-1
				month = 12
			} else {
				month = Number(month)-1
			}
			
		} else {
			if(Number(month) === 12){
				year = Number(year)+1
				month = 1
			} else {
				month = Number(month)+ 1
			}
		}
		if(month<=9){
			month = '0'+month
		}
		state.thisPageDate.month = Number(month);
		state.thisPageDate.date = year+'-'+month;
		queryStatData(state.thisPageDate.id)
		getMonthDate(year+'-'+month,state.thisPageDate.id)
		if (!calendar.value) return
		calendar.value.selectDate(val)
	}
	const convertSecondsToHMS = (seconds)=> {
	  var hours = Math.floor(seconds / 3600);
	  var minutes = Math.floor((seconds % 3600) / 60);
	  var remainingSeconds = seconds % 60;
	  if(hours > 0){
		 return hours + proxy!.$t("clockingIn_daily.hour") + minutes + proxy!.$t("clockingIn_daily.minute") + remainingSeconds + proxy!.$t("clockingIn_daily.second"); 
	  } else {
		  if(minutes > 0){
			  let timemsg = minutes + proxy!.$t("clockingIn_daily.minute");
			  if(remainingSeconds > 0){
				  timemsg += remainingSeconds + proxy!.$t("clockingIn_daily.second");
			  }
			  return timemsg
		  } else {
			  return remainingSeconds + proxy!.$t("clockingIn_daily.second");
		  }
	  }
	}
	const formattedTime = (timestamp) => {
		let date = new Date(parseInt(timestamp) * 1000);
		let Year = date.getFullYear();
		let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
		let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
		let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
		let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
		let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
		let GMT = Hour +':'+ Minute  + ':' + Sechond;
		return GMT;
	}
	
	const formattedDay = (timestamp) => {
		let date = new Date(parseInt(timestamp) * 1000);
		let Year = date.getFullYear();
		let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
		let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
		let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
		let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
		let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
		let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
		return GMT;
	}
	// 页面配置数据
	const state = reactive < {
		statData: [][];
		statList: {};
		statUser:{},
		thisPageDate : Record < string,string > ;
	} > ({
		statData: [],
		statList: {},
		statUser:{},
		thisPageDate:{
			month:"",
			date:"",
			calendarValue:new Date(),
			id:"",
		},
		
	});
	const params = computed(() => {
		return {...state.thisPageDate}
	});
	
	const formattedDate = (today) => {
		let year = today.getFullYear();
		let month = (today.getMonth() + 1).toString().padStart(2, '0');
		state.thisPageDate.month = Number(month);
		return `${year}-${month}`;
	}
	
	const handleCurrentView = viewMsg =>{
		let thisVal = formattedDate(viewMsg.date);
		state.thisPageDate.date = thisVal;
		getMonthDate(state.thisPageDate.date,state.thisPageDate.id)
	}
	
	const getMonthDate = (month,id) => {
		const getData = {
			uid:id,
			date:month,
		}
		return getCheckingInPersonTableDetail(getData).then(({
			code,
			data
		}) => {
			if (code == ResultEnum.SUCCESS) {
				let tObj = {};
				data.list.map((e,t)=>{
					let keyVAl = 'date_'+(t+1)
					tObj[keyVAl] = e
				})
				state.statList = tObj;
				state.statUser = data.user;
			}
		});
	}
	// 获取统计数据
	const queryStatData = async (id) => {
		// 初始化接口需要传入队列 loading 暴露的 id
		const getData = {
			type:"UserMonthStatisticsDetail",
			uid:id,
		}
		if(state.thisPageDate.date != ''){
			getData.date = state.thisPageDate.date
		}
		return getCheckingInTabs(getData).then(({
			code,
			data
		}) => {
			if (code == ResultEnum.SUCCESS) {
				state.statData = Object.values(data).map(item => item);
			}
		});
	};
	// 初始化页面
	const init = async () => {
		const today = new Date();
		state.thisPageDate.calendarValue = today;
		let thisVal = formattedDate(state.thisPageDate.calendarValue);
		state.thisPageDate.date = thisVal;
		
	};
	
	// 运行初始化
	onMounted(async () => {
		await init()
		state.thisPageDate.id = router.currentRoute.value.query.id;
		state.thisPageDate.calendarValue = new Date(router.currentRoute.value.query.date);
		let thisVal = formattedDate(state.thisPageDate.calendarValue);
		state.thisPageDate.date = thisVal;
		queryStatData(state.thisPageDate.id)
		getMonthDate(state.thisPageDate.date,state.thisPageDate.id)
	});
	
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>